/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { Button, Space, Spin, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import css from './index.less';
import MyCard from '@/components/MyCard';
import { detail } from '../api';
import { history, useParams } from 'umi';

/*
  index中详情点击事件写法参考
  // 详情
  const detailHandle = (record: UserAPI.DataType) => {
    history.push(`userManagement/detail/${record.id}`);
  };
*/

/**
 * 用户信息详情
 */
const Index: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false);
  // 列表数据
  const [info, setInfo] = useState<UserAPI.DetailData>();

  const params = useParams() as { id: string };

  const det = async () => {
    setLoading(true);
    const res = await detail(params.id);
    if (res.code === 200) {
      message.success(res.msg);
      setInfo(res.data);
    } else {
      message.error(res.msg);
    }
    setLoading(false);
  };

  useEffect(() => {
    det();
  }, []);

  const back = () => {
    history.push('/admin/userManagement');
  };

  return (
    <PageHeaderWrapper
      extra={
        <Button type="primary" className={css.button} onClick={back}>
          返回
        </Button>
      }
    >
      <div className={css.app}>
        <Spin spinning={loading}>
          <Space direction="vertical" style={{ width: '100%' }}>
            <MyCard title="用户基础信息">
              <div className={css.card}>
                <div className={css.column}>
                  <div className={css.element}>
                    <p>用户昵称</p> <p>{info?.nickname}</p>
                  </div>
                  <div className={css.element}>
                    <p>姓名</p>
                    <p>{info?.name}</p>
                  </div>
                  <div className={css.element}>
                    <p>联系方式</p>
                    <p>{info?.phone}</p>
                  </div>
                </div>

                <div className={css.column}>
                  <div className={css.element}>
                    <p>性别</p> <p>{info?.gender}</p>
                  </div>
                  <div className={css.element}>
                    <p>民族</p>
                    <p>{info?.nation}</p>
                  </div>
                  <div className={css.element}>
                    <p>出生日期</p> <p>{info?.birthdate}</p>
                  </div>
                </div>

                <div className={css.column}>
                  <div className={css.element}>
                    <p>邮箱</p>
                    <p>{info?.email}</p>
                  </div>
                  <div className={css.element}>
                    <p>住址</p>
                    <p>{info?.address}</p>
                  </div>
                </div>

                <div className={css.column}>
                  <div className={css.element}>
                    <p>身份证号</p>
                    <p>{info?.idNumber}</p>
                  </div>
                  <div className={css.element}>
                    <p>身份证签发机关</p>
                    <p>{info?.identityCardIssuingAuthority}</p>
                  </div>
                  <div className={css.element}>
                    <p>身份证有效期限</p>
                    <p>{info?.validPeriod}</p>
                  </div>
                </div>
              </div>
            </MyCard>
          </Space>
        </Spin>
      </div>
    </PageHeaderWrapper>
  );
};

export default Index;
